<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #centered-form {
            text-align: center; /* 水平居中 */
            margin: 0 auto; /* 垂直居中和水平居中 */
            width: 800px;
        }
       
        #left_row {
            float: left;
            text-align: left;
            width: 60%;
            box-sizing: border-box;
        }

        #right_row {
            float: right;
            text-align: left;
            width: 40%;
            box-sizing: border-box;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
      <div id="centered-form">
        <form  action="#" name="index" method="get">
            <div id="left_row" style="width: 60%; height: 400px; padding: 20px; box-sizing: border-box;">
                <!--登录框-->
                <label for="username">用户名：</label>
                <input type="text" name="uname" placeholder="请输入用户名">
                <label for="username">(可包含a-z、0-9和下划线)</label><br>
                <!--密码框-->
                <label for="username">密码： </label>
                <input type="password" name="password" placeholder="请输入密码">
                <label for="password">(至少包含6个字符)</label><br>
                <label for="username">再次输入密码： </label>
                <input type="password" name="password" placeholder="请输入密码"><br>
                <!--电子邮箱-->
                <label for="emil">电子邮箱： </label>
                <input type="email" name="email">
                <label>(必须包含@字符)</label><br>
                <!--性别-->
                <label for="">性别：</label>
                <input type="radio" name="gender" id="" value="男" checked> 男
                <img src="image/Male.gif">
                <input type="radio" name="gender" id="" value="女" checked> 女
                <img src="image/Female.gif"><br>
                <!--头像-->
                <label for="">头像：</label>
                <input type="file" name="" id=""> <br/>
                <!--爱好-->
                <label for="">爱好：</label>
                <input type="checkbox">运动
                <input type="checkbox">聊天
                <input type="checkbox">玩游戏
                <br>
                <!--喜欢的城市-->
                <label for="">喜欢的城市：</label>
                <select name="plant" id="city" style="width: 30%;">
                    <option>[请 选 择]</option>
                    <option>杭州</option>
                    <option>南京</option>
                    <option>上海</option>
                    <option>北京</option>
                    <option>西安</option>
                    <option>兰州</option>
                </select>
            </div>
            
            <div id="right_row">
                <img src="image/read.gif">
                <span>阅读贵美网服务协议</span><br>
                <p></p>
                <textarea cols="40%" rows="9%">欢迎阅读服务条款协议......</textarea>
            </div>
        </form>
      </div>
</body>
</html>